<template>
  <div :class="[`m-pagination ${placement}`, { hidden: hideOnSinglePage && total <= pageSize }]">
    <div class="m-pagination-wrap">
      <span class="mr8" v-if="showTotal">共 {{ totalPage }} 页 / {{ total }} 条</span>
      <span class="u-item-btn" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
        <t-icon
          class="u-item-btn-icon"
          name="chevron-left"
          size="16"
          :style="{ color: colorList5[store.styleInfo.colorType - 1].shmentColor }"
        ></t-icon>
      </span>
      <span
        :class="[
          'u-item',
          { active: currentPage === 1 },
          { active1: currentPage === 1 && store.styleInfo.colorType == 1 },
          { active2: currentPage === 1 && store.styleInfo.colorType == 2 },
          { active3: currentPage === 1 && store.styleInfo.colorType == 3 },
        ]"
        @click="changePage(1)"
        >1</span
      >
      <span
        class="m-arrow"
        ref="forward"
        v-show="forwardMore && pageList[0] - 1 > 1"
        @click="onForward"
        @mouseenter="forwardArrow = true"
        @mouseleave="forwardArrow = false"
      >
        <span v-show="!forwardArrow" class="u-ellipsis">•••</span>
        <svg
          v-show="forwardArrow"
          class="u-icon"
          viewBox="64 64 896 896"
          data-icon="double-left"
          aria-hidden="true"
          focusable="false"
        >
          <path
            d="M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 0 0 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 0 0 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"
          ></path>
        </svg>
      </span>
      <span
        :class="[
          'u-item',
          {
            active1: currentPage === page && store.styleInfo.colorType == 1,
            active2: currentPage === page && store.styleInfo.colorType == 2,
            active3: currentPage === page && store.styleInfo.colorType == 3,
          },
        ]"
        v-for="(page, index) in pageList"
        :key="index"
        @click="changePage(page)"
        >{{ page }}</span
      >
      <span
        class="m-arrow"
        ref="backward"
        v-show="backwardMore && pageList[pageList.length - 1] + 1 < totalPage"
        @click="onBackward"
        @mouseenter="backwardArrow = true"
        @mouseleave="backwardArrow = false"
      >
        <span v-show="!backwardArrow" class="u-ellipsis">•••</span>
        <svg
          v-show="backwardArrow"
          class="u-icon"
          viewBox="64 64 896 896"
          data-icon="double-right"
          aria-hidden="true"
          focusable="false"
        >
          <path
            d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
          ></path>
        </svg>
      </span>
      <span
        v-show="totalPage !== 1"
        :class="[
          'u-item',
          { active: currentPage === totalPage },
          { active1: currentPage === totalPage && store.styleInfo.colorType == 1 },
          { active2: currentPage === totalPage && store.styleInfo.colorType == 2 },
          { active3: currentPage === totalPage && store.styleInfo.colorType == 3 },
        ]"
        @click="changePage(totalPage)"
        >{{ totalPage }}</span
      >
      <span class="u-item-btn" :class="{ disabled: currentPage === totalPage }" @click="changePage(currentPage + 1)">
        <t-icon
          class="u-item-btn-icon"
          name="chevron-right"
          size="16"
          :style="{ color: colorList5[store.styleInfo.colorType - 1].shmentColor }"
        ></t-icon>
      </span>
      <span class="u-jump-page" v-if="showQuickJumper"
        >跳至
        <input
          type="text"
          v-model="jumpNumber"
          :style="{
            'text-align': 'center',
            background: colorList5[store.styleInfo.colorType - 1].shmentColor2,
            color: colorList5[store.styleInfo.colorType - 1].fontColor,
          }"
        />
        页</span
      >
    </div>
  </div>
</template>
<script setup lang="ts">
// @ts-nocheck
import { ref, computed, watch, onMounted } from 'vue';
import { colorList5 } from '../../data';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const props = defineProps({
  current: {
    type: Number,
    default: 1,
  }, //当前页码
  pageSize: {
    type: Number,
    default: 10,
  }, //每页条数
  total: {
    type: Number,
    default: 1,
  }, //总数
  pageListNum: {
    type: Number,
    default: 8,
  }, //显示的页码数组长度
  hideOnSinglePage: {
    type: Boolean,
    default: false,
  }, //只有一页时是否隐藏分页器
  showQuickJumper: {
    type: Boolean,
    default: true,
  }, //是否可以快速跳转至某页
  showTotal: {
    type: Boolean,
    default: false,
  }, //是否显示当前页数和数据总量
  placement: {
    type: String,
    default: 'center',
  }, // 分页器展示位置，靠左left，居中center，靠右right
});
const currentPage = ref(props.current); // 当前页数
const jumpNumber = ref(1); // 跳转的页码
const forwardMore = ref(false); // 左省略号展示
const backwardMore = ref(false); // 右省略号展示
const forwardArrow = ref(false); // 左箭头展示
const backwardArrow = ref(false); // 右箭头展示
const totalPage = computed(() => {
  // 总页数
  return props.total > 0 ? Math.ceil(props.total / props.pageSize) : 0; // 向上取整
});
const pageList = computed(() => {
  // let arr = dealPageList(props.total > 0 ? currentPage.value : 0).filter((n) => n !== 1 && n !== totalPage.value);
  // console.log(arr, 'arr');
  // 获取显示的页码数组
  if (props.total > 0) {
    return dealPageList(props.total > 0 ? currentPage.value : 0).filter((n) => n !== 1 && n !== totalPage.value);
  } else {
    return 1;
  }
});
currentPage.value = props.current;
const emit = defineEmits(['change']);
watch(currentPage, (to: number): void => {
  // loading,value = true
  console.log('change:', to);
  emit('change', {
    page: to,
    pageSize: props.pageSize,
  });
});
onMounted(() => {
  // 监听键盘Enter按键
  document.onkeydown = (e): void => {
    const ev = e || window.event;
    if (ev && ev.keyCode === 13 && jumpNumber.value) {
      jumpPage(jumpNumber.value);
    }
  };
});
function dealPageList(curPage: number): number[] {
  if (props.total < props.pageSize) {
    return [1];
  }
  var resList = [];
  var offset = Math.floor(props.pageListNum / 2); // 向下取整
  var pager = {
    start: curPage - offset,
    end: curPage + offset,
  };
  if (pager.start < 1) {
    pager.end = pager.end + (1 - pager.start);
    pager.start = 1;
  }
  if (pager.end > totalPage.value) {
    pager.start = pager.start - (pager.end - totalPage.value);
    pager.end = totalPage.value;
  }
  if (pager.start < 1) {
    pager.start = 1;
  }
  if (pager.start > 1) {
    forwardMore.value = true;
  } else {
    forwardMore.value = false;
  }
  if (pager.end < totalPage.value) {
    backwardMore.value = true;
  } else {
    backwardMore.value = false;
  }
  // 生成要显示的页码数组
  for (let i = pager.start; i <= pager.end; i++) {
    resList.push(i);
  }

  return resList;
}
function onForward(): void {
  currentPage.value = currentPage.value - props.pageListNum > 0 ? currentPage.value - props.pageListNum : 1;
}
function onBackward(): void {
  currentPage.value =
    currentPage.value + props.pageListNum < totalPage.value ? currentPage.value + props.pageListNum : totalPage.value;
}
function jumpPage(jumpNum: string | number): void {
  if (Number(jumpNum)) {
    if (Number(jumpNum) < 1) {
      jumpNum = 1;
    }
    if (Number(jumpNum) > totalPage.value) {
      jumpNum = totalPage.value;
    }
    changePage(Number(jumpNum));
  }
  jumpNumber.value = ''; // 清空跳转输入框
}
function changePage(pageNum: number): boolean | void {
  if (pageNum === 0 || pageNum === totalPage.value + 1) {
    return false;
  }
  if (currentPage.value !== pageNum) {
    // 点击的页码不是当前页码
    currentPage.value = pageNum;
  }
}
watch(
  () => props.current,
  () => {
    jumpNumber.value = props.current;
  },
  { deep: true },
);
</script>
<style lang="less" scoped>
.m-pagination {
  box-sizing: border-box;
  margin: 16px 0;
}
.hidden {
  display: none;
}
.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.m-pagination-wrap {
  display: inline-block;
  height: 32px;
  line-height: 30px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  text-align: center;
  .mr8 {
    margin-right: 8px;
  }
  .u-item {
    min-width: 32px;
    height: 32px;
    display: inline-block;
    user-select: none; // 禁止选取文本
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 32px;
    &:hover {
      .active();
    }
    .u-arrow {
      display: inline-block;
      width: 12px;
      height: 12px;
      transition: all 0.3s;
    }
    &:not(:last-child) {
      margin-right: 8px;
    }
  }
  .active {
    // 悬浮/选中样式
    font-weight: 600;
  }
  .active1 {
    background: #452e20;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 32px;
  }
  .active2 {
    background: #8c7a57;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 32px;
  }
  .active3 {
    background: #353c48;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 32px;
  }
  .disabled {
    // pointer-events: none; // 禁用鼠标事件
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
    :deep(.u-item-btn-icon) {
      color: rgba(255, 255, 255, 0.2) !important;
    }
    &:hover {
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      border-color: #d9d9d9;
      .u-arrow {
        fill: rgba(255, 255, 255, 0.2);
      }
    }
    .u-arrow {
      fill: rgba(255, 255, 255, 0.2);
    }
    .u-item-btn-icon {
      color: rgba(255, 255, 255, 0.2);
    }
  }
  .m-arrow {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    min-width: 32px;
    height: 32px;
    letter-spacing: 2px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
    cursor: pointer;
    .u-ellipsis {
      color: #fff;
      transition: all 0.3s;
    }
    .u-icon {
      fill: #666;
      width: 12px;
      height: 12px;
    }
  }
  .u-jump-page {
    margin-left: 8px;
    line-height: 32px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    :deep(input) {
      vertical-align: top;
      width: 48px;
      height: 32px;
      padding: 4px 11px;
      margin: 0 8px;
      border: 1px solid transparent;
      border-radius: 16px;
      text-align: left;
      outline: none;
      transition: all 0.3s;
      color: #fff;
    }
  }
}
.u-item-btn {
  min-width: 32px;
  height: 32px;
  display: inline-block;
  user-select: none; // 禁止选取文本
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}
.u-item-btn-icon {
  color: rgba(255, 255, 255, 0.9);
}
</style>
